<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    back
    :title="title"
    :show-top="showTop"
    :dark="loaded ? false : true"
    :hideSafeArea="true"
    :bg-color="uNavColor"
    ><view
      class="styleContainer"
      :style="{
        backgroundImage: 'url(' + srcBg + ')',
        paddingTop: navHeight + 'px;',
      }"
    >
      <view class="card">
        <view class="card-order">
          <view
            class="result-qrcode"
            :style="{
              backgroundImage: 'url(' + greenBorder + ')',
            }"
          >
            <image v-if="qrcodeUrl" :src="qrcodeUrl" class="qrcode-pic" />
          </view>

          <view class="check-result-button">{{ qrCodeText }}</view>
        </view>
      </view>
      <view class="fixedButtons" v-if="buttonText != '评定中'">
        <view class="return-sxh-home" @click="checkResult">{{
          buttonText
        }}</view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
export default {
  data() {
    return {
      qrCodeText: "扫码体验",
      buttonText: "立即查看结果",
      qrcodeUrl: "",
      navHeight: getApp().globalData.navHeight,
      greenBorder:
        "https://img3.job1001.com/ypMp/elan/images/career/qrCode_wrapper.png",
      title: "",
      showTop: false,
      uNavColor: "#ffffff",
      srcBg: this.$imgBaseSelf + "career/selectPositionBg.png",
      objId: "",
      from: "",
    };
  },
  methods: {
    checkResult() {
      if (this.from == "vocationalAssessmentAnswer") {
        uni.redirectTo({
          url: `/pagesSub/careerAssessResultActNew/index?fromSxh=sxh`,
        });
      }
      if (this.from == "AIResumeDiagnoseNew") {
        uni.navigateTo({
          url: `/pagesSub/newResume/resumeAssessment/index?fromSxh=sxh`,
        });
      }
      if (this.from == "interviewListAI") {
        uni.navigateTo({
          url: `/pagesSub/companyCenter/interviewAI/interviewResult?objId=${this.objId}&fromSxh=sxh`,
        });
      }
      if (this.from == "CreateCareerReportPrePage") {
        uni.navigateTo({
          url: `/pagesSub/userCenter/careerPathV2/components/CreateAndDeliverCareerPathReport?&fromSxh=sxh`,
        });
      }
    },
  },
  onLoad(opt) {
    console.log("opt", opt);
    this.qrCodeText = opt.qrCodeText;
    this.qrcodeUrl = opt.qrcodeUrl;
    this.objId = opt.objId;
    this.from = opt.from;
    this.buttonText = opt.buttonText;
  },
  created() {},
};
</script>

<style lang="scss" scoped>
$img-base-careerPath: $img-base + "careerPath/";
.styleContainer {
  background-size: 100% 100%;
  height: 100vh;
  position: relative;
  .card {
    width: 528rpx;
    height: 692rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 8rpx 0rpx #b2d6e5;
    border-radius: 16rpx;
    margin: 0 auto;
    margin-top: 200rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .card-order {
      width: 516rpx;
      height: 676rpx;
      border-radius: 16rpx;
      border: 2rpx solid #d4dff3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      .result-qrcode {
        width: 374rpx;
        height: 376rpx;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .qrcode-pic {
          width: 240rpx !important;
          height: 240rpx !important;
        }
      }
      .check-result-button {
        width: 412rpx;
        height: 86rpx;
        background: #f2f8fb;
        border-radius: 16rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        font-size: 32rpx;
        color: #222222;
      }
    }
  }
  .fixedButtons {
    z-index: 999;
    width: calc(100vw - 64rpx);
    position: fixed;
    display: flex;
    justify-content: space-between;
    bottom: 80rpx;
    width: 100vw;
    align-items: center;
    justify-content: center;
    .return-sxh-home {
      width: 680rpx;
      height: 96rpx;
      background: #ff711e;
      border-radius: 200rpx;
      color: #ffffff;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #ffffff;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
